<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/03style.css"/>
	</head>
	<body>
		<div class="shape-left"></div>
		<div class="shape-right"></div>
		<content class="content">
		   shape-outside是不规则形状环绕布局的核心，支持的属性值分为如下四大类：
		   
		   none – 默认值
		   <shape-box> – 图形盒子。
		   <basic-shape> – 基本图形函数。
		   <image> – 图像类。
		   其中：
		   
		   none很好理解，表示就是普通的矩形环绕。
		   <shape-box>（图形盒子）是shape相关布局中的一个名词，比clip-path属性中的<geometry-box>（几何盒子）支持的盒子要少一些，就是CSS2.1中的基本盒模型的4种盒子，分别是margin-box，border-box，padding-box和content-box。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。
		   <basic-shape>指的是基本形状函数，和CSS clip-path剪裁属性支持的基本形状函数一模一样。
		   <image>值的是图像类，包括URL链接图片，渐变图像，cross-fade()，element()等。所有这些图像类，CSS3 mask遮罩属性也都支持，本文只会介绍常用的URL链接和渐变图像，其他图片类不介绍，有兴趣可以访问介绍遮罩的这篇文章，有完全展示。
		</content>
	</body>
</html>
